/*
 * 活动列表
 * @Author: ice
 * @Date: 2019-04-29 11:03:55
 * @Last Modified by: Wilbur
 * @Last Modified time: 2019-05-08 17:43:52
 */

<template>
    <div class="container activity-list-container">
        <div class="content-wrapper">
            <el-row
                class="search-wrapper"
                :gutter="20"
            >
                <el-form
                    label-position="right"
                    label-width="84px"
                    ref="searchfrom"
                    size="small"
                >


                    <el-form-item label="活动地区">
                        <el-cascader
                            ref="citySelect"
                            placeholder="活动地区"
                            :options="cities"
                            filterable
                            clearable
                            expand-trigger="hover"
                            v-model="filterData.cid"
                            @change="getTableData()"
                            :props="{
                                label: 'name',
                                value: 'id'
                            }"
                        />
                    </el-form-item>
                    <el-form-item label="活动类型">
                        <el-select
                            v-model="filterData.type"
                            filterable
                            @change="getTableData()"
                            placeholder="请选择"
                        >
                            <el-option
                                label="不限"
                                :value="0"
                            />
                            <el-option
                                label="投票"
                                :value="1"
                            />
                            <el-option
                                label="现场大屏幕"
                                :value="3"
                            />
                            <el-option
                                label="抢票"
                                :value="4"
                            />
                            <el-option
                                label="报名"
                                :value="2"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="活动状态">
                        <el-select
                            v-model="filterData.activity_status"
                            filterable
                            @change="getTableData()"
                            placeholder="请选择"
                        >
                            <el-option
                                label="不限"
                                :value="0"
                            />
                            <el-option
                                label="未开始"
                                :value="1"
                            />
                            <el-option
                                label="进行中"
                                :value="2"
                            />
                            <el-option
                                label="已结束"
                                :value="3"
                            />
                            <el-option
                                label="已隐藏"
                                :value="-1"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="赞助状态">
                        <el-select
                            v-model="filterData.sponsor_status"
                            @change="getTableData()"
                            placeholder="请选择"
                        >
                            <el-option
                                label="不限"
                                :value="0"
                            />
                            <el-option
                                label="已赞助"
                                :value="2"
                            />
                            <el-option
                                label="未赞助"
                                :value="1"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="开始时间">
                        <el-date-picker
                            v-model="filterData.start_time"
                            value-format="timestamp"
                            type="datetime"
                            @change="getTableData()"
                            placeholder="选择开始时间"
                            style="width: 193px;"
                        />
                    </el-form-item>

                    <el-form-item label="结束时间">
                        <el-date-picker
                            type="datetime"
                            placeholder="选择结束时间"
                            value-format="timestamp"
                            v-model="filterData.end_time"
                            @change="getTableData()"
                            style="width: 193px;"
                        />
                    </el-form-item>
                    <el-form-item label="关键字">
                        <el-input
                            v-model.trim="filterData.search_content"
                            placeholder="请输入活动名称和学校"
                            type="text"
                            size="small"
                            style="width: 193px;"
                            @keyup.native.enter="getTableData(1)"
                        />
                    </el-form-item>
                    <el-button
                        size="small"
                        style="margin-left: 18px;"
                        @click="fnResetFrom('searchfrom')"
                    >重置筛选</el-button>
                    <el-button
                        size="small"
                        type="primary"
                        style="margin-left: 18px;"
                        @click="getTableData(1)"
                    >搜索</el-button>
                </el-form>
            </el-row>
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;"
                >
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        :width="50"
                        label="序号"
                    >
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="left"
                        prop="title"
                        :min-width="150"
                        label="活动名称"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        header-align="left"
                        label="公众号名称"
                        prop="platform_name"
                        show-overflow-tooltip
                        :min-width="150"
                    />

                    <el-table-column
                        prop="supply_phone"
                        :width="110"
                        :formatter="emptyFormatter"
                        label="联系方式"
                    />
                    <el-table-column
                        prop="province_name"
                        :formatter="emptyFormatter"
                        show-overflow-tooltip
                        label="省份"
                    />
                    <el-table-column
                        prop="city_name"
                        :formatter="emptyFormatter"
                        show-overflow-tooltip
                        label="城市"
                    />
                    <el-table-column
                        prop="school_name"
                        :min-width="150"
                        :formatter="emptyFormatter"
                        show-overflow-tooltip
                        label="所属学校"
                    />
                    <el-table-column
                        prop="create_time"
                        :width="150"
                        label="活动时间"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.activity_start_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}-<br>
                            {{ scope.row.activity_end_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="activity_people_num"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        label="预计人数"
                    />

                    <el-table-column
                        prop="type"
                        label="类型"
                        :width="100"
                    >
                        <template slot-scope="scope">
                            <template v-if="scope.row.type == 1">投票</template>
                            <template v-if="scope.row.type == 3">现场大屏幕</template>
                            <template v-if="scope.row.type == 4">抢票</template>
                            <template v-if="scope.row.type == 2">报名</template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="resource_no"
                        label="查看h5"
                    >
                        <template slot-scope="scope">
                            <template v-if="scope.row.type == 3">
                                <a
                                    class="wall-link"
                                    href="http://hand.handschool.cn/trunk/addon/WxWall/WxWallShow/index/id/25768.html"
                                    target="_blank"
                                >预览</a>
                            </template>
                            <template v-else>
                                <el-popover
                                    placement="top"
                                    trigger="click"
                                    popper-class="h5-qrcode"
                                >
                                    <div class="title">
                                        手机扫描二维码
                                    </div>
                                    <div
                                        v-loading="loadingQrcode"
                                        class="code-img"
                                        :style="'background-image: url('+qrcodeUrl+')'"
                                    />
                                    <i
                                        slot="reference"
                                        class="iconfont icon-erweima1"
                                        @click="fnLoadQrcode(scope.row.sponsor_no)"
                                    />
                                </el-popover>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="sponsor_money_max"
                        show-overflow-tooltip
                        label="冻结金额(￥)"
                        :width="110"
                    />
                    <el-table-column
                        prop="activity_status"
                        label="状态"
                    >
                        <template slot-scope="scope">
                            <template v-if="scope.row.activity_status == 1">未开始</template>
                            <template v-if="scope.row.activity_status == 2">进行中</template>
                            <template v-if="scope.row.activity_status == 3">已结束</template>
                            <template v-if="scope.row.activity_status == -1">已隐藏</template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="hire_sponsor.company_name"
                        :width="150"
                        :formatter="emptyFormatter"
                        label="赞助商"
                    />
                    <el-table-column
                        prop="hire_sponsor.phone"
                        :width="120"
                        label="赞助商联系方式"
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        :width="90"
                        label="广告位图片"
                    >
                        <template slot-scope="scope">
                            <template v-if="!scope.row.hire_sponsor || !scope.row.hire_sponsor.adv_config">--</template>
                            <template v-else-if="scope.row.hire_sponsor.adv_config.verify == 2">
                                <el-button
                                    type="text"
                                    @click="fnShowPreview(scope.row.hire_sponsor.adv_config.banner)"
                                    :disabled="!scope.row.hire_sponsor.adv_config.banner"
                                >查看</el-button>
                            </template>
                            <template v-else>
                                <el-button
                                    type="text"
                                    @click="handleRoute('stationList')"
                                >去审核</el-button>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="create_time"
                        :width="150"
                        label="按钮和链接"
                    >
                        <template slot-scope="scope">
                            <template v-if="!scope.row.hire_sponsor || !scope.row.hire_sponsor.adv_config || scope.row.hire_sponsor.adv_config.verify != 2">--</template>
                            <template v-else>
                                <el-button
                                    type="text"
                                    @click="fnOpen(scope.row.hire_sponsor.adv_config.jump_url)"
                                    :disabled="!scope.row.hire_sponsor.adv_config.jump_url"
                                >{{ scope.row.hire_sponsor.adv_config.jump_title }}</el-button>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="create_time"
                        :width="150"
                        label="创建时间"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="date"
                        label="操作"
                        :width="120"
                        fixed="right"
                    >
                        <template slot-scope="scope">
                            <div>
                                <el-button
                                    type="text"
                                    @click="fnStatusPromot(scope.row.sponsor_no, 1)"
                                    :disabled="scope.row.activity_status !== -1"
                                >显示</el-button>
                                <el-button
                                    type="text"
                                    :disabled="scope.row.activity_status == -1"
                                    @click="fnStatusPromot(scope.row.sponsor_no, 2)"
                                >隐藏</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>
        </div>
        <img-preview ref="preview" />
    </div>
</template>

<script>
import imgPreview from '@/components/common/img-preview';
import regin from '@/assets/js/regin.min.js';

export default {
    components: { imgPreview },
    data() {
        return {
            authResult: {},
            tableData: [],
            filterData: {
                cid: [0, 0],
                type: '',
                activity_status: '',
                sponsor_status: '',
                start_time: '',
                end_time: '',
                search_content: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            currTime: 0,
            qrcodeUrl: '',
            loadingQrcode: false,
            selectedOptions2: [],
            cities: regin
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.$store.commit('SET_HEADER', [
            {
                title: "广告系统",
            },
            {
                title: '活动赞助列表'
            }
        ]);
        this.filterData.type = this.$route.query.type ? eval(this.$route.query.type) : 0;
        this.filterData.cid = this.$route.query.cid ? JSON.parse('[' +(this.$route.query.cid) + ']') : [0];
        this.filterData.activity_status = this.$route.query.activity_status ? eval(this.$route.query.activity_status) : 0;
        this.filterData.sponsor_status = this.$route.query.sponsor_status ? eval(this.$route.query.sponsor_status) : 0;
        this.filterData.start_time = this.$route.query.start_time ? this.$route.query.start_time : '';
        this.filterData.end_time = this.$route.query.end_time ? this.$route.query.end_time : '';
        this.filterData.search_content = this.$route.query.search_content ? this.$route.query.search_content : '';
        this.getTableData(this.$route.query.page);
    },
    filters: {
        emptyFilter(val) {
            if (!val) {
                return '--';
            }
            return val;
        }
    },
    methods: {
        fnStatusPromot(no, status) {
            let data = {};

            data.status = status ;
            data.sponsor_no = no ;
            // 通过
            if (status == 1) {
                this.$confirm('确认显示该活动', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    this.fnChangeStatus(data);
                }).catch(() => {
                });
            } else {
                //拒绝
                this.$confirm('确认隐藏该活动', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    this.fnChangeStatus(data);
                }).catch(() => {
                });
            }
        },
        fnChangeStatus(data){
            this.$post('/wei4/sponsor_activity%5Cset_status', data, resp => {
                if (resp.code == 1) {
                    this.getTableData();
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        fnResetFrom(formName) {
            this.filterData = {
                type: 0,
                activity_status: '',
                sponsor_status: '',
                start_time: '',
                end_time: '',
                search_content: ''
            };
            this.getTableData(1);
        },
        fnLoadQrcode(no){
            this.loadingQrcode = true;
            let ticket = localStorage.getItem('sessionTicket');
            let base = this.$baseUrl;

            this.qrcodeUrl = `${base}/wei4/sponsor_activity%5Cget_qrcode?sponsor_no=${no}&__ticket=${ticket}`;
            console.log(this.qrcodeUrl);
            this.$nextTick(() => {
                this.loadingQrcode = false;
            });
        },
        /** 获取表格数据 */
        getTableData(page) {
            let time = new Date().getTime();

            this.currTime = time;

            this.$router.replace({
                query: {
                    ...this.filterData,
                    page: page || this.page.now_page
                }
            });

            let json = {
                ...this.filterData,
                page_id: page || this.page.now_page,
                page_size: 20
            };

            json.cid = json.cid[1];
            this.$post('/wei4/sponsor_activity%5Cget_list', json, resp => {
                if (this.currTime != time) {
                    return;
                }
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                    if (this.page.now_page > resp.data.page.total_page && this.page.now_page !== 1) {
                        this.getTableData(resp.data.page.total_page);
                    }
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /** 跳转页面 */
        handleRoute(name, query) {
            let obj = {
                name
            };

            if (query) {
                obj.query = query;
            }

            this.$router.push(obj);
        },

        /** 列表渲染辅助函数：列表项为空处理 */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },
        fnOpen(url){
            window.open(url);
        },
        fnShowPreview(images) {
            this.$refs.preview.show([images]);
        },
    }
};
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
      margin-left: 10px;
    }
  }
  .content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
  }
  .search-wrapper {
    padding: 15px;
    background-color: #fff;
  }
  .filter-item {
    .el-form-item {
      white-space: nowrap;
    }
    .el-input {
      width: auto;
      vertical-align: middle;
    }
    .el-button {
      margin-left: 15px;
      vertical-align: middle;
    }
  }
  .table-wrapper {
    flex: 1;
    background-color: #fff;

    .el-button {
      padding: 0;
    }
    .icon-bianji {
      font-size: 14px;
      color: #b9b9b9;
      cursor: pointer;
    }
    .btn-delete {
      color: #fd4d32;
      &.is-disabled {
        color: #c0c4cc;
        cursor: not-allowed;
      }
    }
    .submit-config-item {
      display: inline-block;
      position: relative;
      padding-right: 10px;
      font-size: 14px;

      & + .submit-config-item {
        padding-left: 10px;
        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          width: 1px;
          height: 14px;
          transform: translate(0, -50%);
          background-color: #d8d8d8;
        }
      }

      .num {
        vertical-align: middle;
      }
      .iconfont {
        font-size: 16px;
        color: #b9b9b9;
        vertical-align: middle;
      }

      .icon-tupian {
        font-size: 20px;
      }
    }
  }
  .pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
      float: right;
      padding: 0;
      background-color: transparent;
    }
  }
  .dialog-link {
    & + .dialog-link {
      margin-top: 20px;
    }
    .link-label {
      font-weight: 500;
      margin-right: 20px;
    }
  }
  .wall-link{
       color: #20A0FF;
       text-decoration: none;
  }
  .icon-erweima1 {
    font-size: 24px;
    line-height: 24px;
    cursor: pointer;
    color: #929192;
  }
</style>
<style lang="less">
  .activity-list-container {
    .search-wrapper {
      .el-form-item {
        display: inline-block;
      }
    }
  }
  .h5-qrcode {
    width: 144px;
    .title {
      font-size: 12px;
      line-height: 18px;
      margin-bottom: 4px;
      text-align: center;
    }
    .code-img {
      width: 116px;
      height: 116px;
      margin: 0 auto;
      background: #ccc;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }
  }
</style>
